<template>
  <van-loading style="justify-content: center;height: 100vh;" vertical size="50" v-show="chartVisible">
    <template #icon>
      <van-icon name="star-o" size="50" />
    </template>
    加载中...
  </van-loading>
  <div>
  <v3-drag-zoom-container style="width: 65rem; height: 72rem">
    <div id="tChart" ref="tChart" />
  </v3-drag-zoom-container>
  </div>
</template>
<script>
import * as zrender from "zrender";
//工具类
import DrawUtil from "@/tchart/generalPurpose/drawUtil";
//画中间的图表
import Tchart from "@/tchart/generalPurpose/centre";
//画边缘的表格
import periphery from "@/tchart/generalPurpose/index";
//常量
import { P_CONST } from "@/tchart/generalPurpose/tchart.config";

import { querychartdata } from "../api/sign";

export default {
  name: "Tchart",
  computed: {},
  data() {
    return {
      tb_height: 10,
      zrInstance: null,
      chartVisible: true,
      datas: [
        {
          hosName: "",
          deptName: "",
          admissionDate: "",
          dischargeDate: "",
          motherName: null,
          name: "",
          newbornFlg: null,
          birthDate: "",
          sex: "",
          age: "",
          bedNo: "",
          visitNo: "",
          serialNo: "",
          fullDays: ["", "", "", "", "", "", ""],
          days: ["", "", "", "", "", "", ""],
          inHosDays: ["", "", "", "", "", "", ""],
          operationDays: [null, null, null, null, null, null, null],
          hours: ["", "", "", "", "", ""],
          alyKey: ["", "", "", "", ""],
          pageNo: 1,
          tbData: [
            {
              datetime: "",
              auxiliary: [
                {
                  key: "",
                  value: "",
                },
                {
                  key: "",
                  value: "",
                },
                {
                  key: "",
                  value: [""],
                },
                {
                  key: "",
                  value: "",
                },
              ],
              hours: [
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "",
                },
                {
                  temperature: "",
                  reductionTemperature: null,
                  breathe: "",
                  breatheType: null,
                  pulse: "",
                  heartRate: null,
                  painLevel: "",
                  painIntervention: null,
                  topMark: "",
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: "",
                  reductionTemperature: null,
                  breathe: "",
                  breatheType: null,
                  pulse: "",
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: "",
                  reductionTemperature: null,
                  breathe: "",
                  breatheType: null,
                  pulse: "",
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
              ],
            },
            {
              datetime: "",
              auxiliary: [
                {
                  key: "",
                  value: "",
                },
              ],
              hours: [
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "",
                },
                {
                  temperature: "",
                  reductionTemperature: null,
                  breathe: "",
                  breatheType: null,
                  pulse: "",
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "",
                },
                {
                  temperature: "",
                  reductionTemperature: null,
                  breathe: "",
                  breatheType: null,
                  pulse: "",
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: "",
                  reductionTemperature: null,
                  breathe: "",
                  breatheType: null,
                  pulse: "",
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "",
                },
                {
                  temperature: "",
                  reductionTemperature: null,
                  breathe: "",
                  breatheType: null,
                  pulse: "",
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "",
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
              ],
            },
            {
              datetime: "03",
              auxiliary: [
                {
                  key: "",
                  value: "",
                },
              ],
              hours: [
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: "",
                  reductionTemperature: null,
                  breathe: "",
                  breatheType: null,
                  pulse: "",
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "",
                },
                {
                  temperature: "",
                  reductionTemperature: null,
                  breathe: "",
                  breatheType: null,
                  pulse: "",
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "",
                },
                {
                  temperature: "",
                  reductionTemperature: null,
                  breathe: "",
                  breatheType: null,
                  pulse: "",
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "",
                },
                {
                  temperature: "",
                  reductionTemperature: null,
                  breathe: "",
                  breatheType: null,
                  pulse: "",
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "",
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: "",
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
              ],
            },
            {
              datetime: "",
              auxiliary: [
                {
                  key: "",
                  value: "",
                },
              ],
              hours: [
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: "",
                  reductionTemperature: null,
                  breathe: "",
                  breatheType: null,
                  pulse: "",
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: "",
                  reductionTemperature: null,
                  breathe: "",
                  breatheType: null,
                  pulse: "",
                  heartRate: null,
                  painLevel: "",
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
              ],
            },
            {
              datetime: "05",
              auxiliary: [
                {
                  key: "大便",
                  value: "1",
                },
              ],
              hours: [
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: "0",
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: "0",
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: "",
                  reductionTemperature: null,
                  breathe: "",
                  breatheType: null,
                  pulse: "",
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: "0",
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: "0",
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: "0",
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
              ],
            },
            {
              datetime: "",
              auxiliary: [
                {
                  key: "",
                  value: "",
                },
              ],
              hours: [
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: "",
                  reductionTemperature: null,
                  breathe: "",
                  breatheType: null,
                  pulse: "",
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
              ],
            },
            {
              datetime: "",
              auxiliary: [
                {
                  key: "",
                  value: "",
                },
              ],
              hours: [
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: false,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: false,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: "0",
                },
                {
                  temperature: "",
                  reductionTemperature: null,
                  breathe: "",
                  breatheType: null,
                  pulse: "",
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: false,
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: false,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: false,
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: false,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: false,
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: false,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: false,
                },
              ],
            },
          ],
          startDateStr: "",
        },
      ],
    };
  },
  beforeCreate() {
    // this.$options.components['medicalRecordPage'] = () => import('@/pages/views/emr/medicalRecordMgt/medicalRecordPageViews/' + this.fileName + '.vue')
  },
  mounted() {
    const selectitem = JSON.parse(localStorage.getItem("selectitem"));
    querychartdata({ patientregid: selectitem.id })
      .then((res) => {
        if (res.code === 0) {
          this.datas = res.data;
          this.initTchart();
          this.chartVisible = false;
        } else {
          showNotify({ type: "warning", position: 'bottom', message: res.msg });
          this.chartVisible = false;
        }
      })
      .catch((err) => {
        console.log(err);
        this.chartVisible = false;
      });
  },
  beforeDestroy() {
    zrender.dispose();
  },
  methods: {
    initTchart() {
      console.log("initTchart", this.datas);
      //dom 不存在时不画
      if (!this.$refs.tChart) {
        return false;
      }
      //不要重复初始化
      this.$refs.tChart.innerHTML = "";
      for (let i = 0; i < this.datas.length; i++) {
        const tChartBox = document.createElement("div");
        tChartBox.setAttribute("id", "tCharPage" + i);
        // if (this.datas.length - 1 !== i) {
        //   tChartBox.setAttribute('class', 'page-break-after')
        // }
        tChartBox.setAttribute("class", "t-chart");
        this.$refs.tChart.appendChild(tChartBox);
        this.zrInstance = zrender.init(
          document.getElementById("tCharPage" + i),
          { devicePixelRatio: 4 }
        );
        const data = this.datas[i];
        DrawUtil.initHoverText(this.zrInstance);
        periphery.tbHeader(data, this.zrInstance);
        // eslint-disable-next-line camelcase
        const center_y = periphery.topTable(data, this.zrInstance);
        periphery.leftTable(data, this.zrInstance);
        periphery.bottomTable(data, this.zrInstance, {
          tb_height: this.tb_height,
        });
        Tchart.init(data, this.zrInstance, {
          btEnabled: true,
          pulseEnabled: true,
          breatheEnabled: false,
          nurseEventEnabled: true,
          x: P_CONST.LABEL_WIDTH,
          y: center_y,
        });
      }
    },
  },
};
</script>

<style>
.t-chart {
  width: 65rem;
  height: 72rem;
}
</style>
